<template>
  <div class="task-dialog">
    <el-dialog
      v-model="dialogVisible"
      @open="onOpen"
      @close="onClose"
      title="计划详情"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        size="default"
        label-width="0px"
        label-position="left"
      >
        <div class="task-form-title">计划名称</div>
        <el-form-item label="" prop="name">
          <!-- <el-input
            v-model="formData.name"
            placeholder="请输入计划名称"
            :maxlength="50"
            show-word-limit
            clearable
          ></el-input> -->
          <span>{{formData.name}}</span>
        </el-form-item>
        <div class="task-form-title">任务介绍</div>
        <el-form-item label="" prop="description">
          <!-- <editor v-model="formData.description" :min-height="192" /> -->
          <!-- <editor
            class="WangEditor"
            @select="getRich"
            ref="childrenRef"
            :editValue="formData.description"
            v-if="dialogVisible"
          /> -->
          <!-- <editor v-model="formData.description" v-if="dialogVisible" /> -->
          <div v-html="formData.description"></div>
        </el-form-item>
        <div class="task-form-title">活动时间</div>
        <el-form-item label="" prop="planTime">
          <!-- <el-date-picker
            type="datetimerange"
            v-model="formData.planTime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            :style="{ width: '100%' }"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="至"
            clearable
          ></el-date-picker> -->
           <span>{{ formData.planTime[0] }}至{{ formData.planTime[1] }}</span>
        </el-form-item>
        <div class="task-form-title">优先度</div>
        <el-form-item label="" prop="priority">
          <!-- <el-select
            v-model="formData.priority"
            placeholder="请选择优先度型"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="item in priorityOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select> -->
          <span>{{formData.priority}}</span>
        </el-form-item>
        <div class="task-form-title">负责人</div>
        <el-form-item label="" prop="teachers">
          <div v-for="item in formData.teacherList" :key="item.id">
            {{ item.username }},
          </div>
          <!-- <el-button @click="addTeacherShow">添加</el-button> -->
        </el-form-item>
        <div class="task-form-title">成员</div>
        <el-form-item label="" prop="students">
          <div v-for="item in formData.userList" :key="item.id">
            {{ item.username }},
          </div>
          <!-- <el-button @click="addStudentShow">添加</el-button> -->
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
  <MemberList
    v-model="memberDialogVisible"
    @confirm="addTeacher"
    :checkedList="formData.teacherList"
    type="teacher"
    :projectId="props.projectId"
  ></MemberList>
  <MemberList
    v-model="memberDialogVisible2"
    @confirm="addStudent"
    :checkedList="formData.userList"
    type="student"
    :projectId="props.projectId"
  ></MemberList>
</template>
<script setup>
import { getToken } from "@/utils/auth";
import { getPlanInfo } from "@/api/pms/project";
import MemberList from "./memberList.vue";

const headers = ref({
  Authorization: "Bearer " + getToken(),
});
const fileListAction = ref(import.meta.env.VITE_APP_BASEURL + "/common/upload");
const { proxy } = getCurrentInstance();
const props = defineProps({
  currentPlanId: { type: String, default: "" },
  projectId: {
    type: String,
    default: "",
  },
});
const memberDialogVisible = ref(false);
const memberDialogVisible2 = ref(false);
const formRef = ref();
const data = reactive({
  formData: {
    name: "",
    informations: [],
    description: "",
    planTime: [],
    priority: "",
    teacherList: [],
    userList: [],
  },
  rules: {
    name: [
      {
        required: true,
        message: "请输入任务名称",
        trigger: "blur",
      },
    ],
  },
});
const { formData, rules } = toRefs(data);
const priorityOptions = ref(["高", "中", "低"]);
// 弹窗设置
const dialogVisible = defineModel();
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
/**
 * @name: 弹窗打开后执行
 * @description: 弹窗打开后执行方法
 * @return {*}
 */
function onOpen() {
  if (props.currentPlanId) {
    getList();
  }
}
//修改时初始化
function getList() {
  getPlanInfo({ id: props.currentPlanId }).then((response) => {
    formData.value.name = response.data.name;
    formData.value.description = response.data.description;
    formData.value.planTime = [
      response.data.startTime + " 00:00:00",
      response.data.endTime + " 00:00:00",
    ];
    formData.value.priority = response.data.priority;
    formData.value.teacherList = JSON.parse(
      JSON.stringify(response.data.teacherList)
    );
    formData.value.userList = JSON.parse(
      JSON.stringify(response.data.userList)
    );
  });
}
/**
 * @name: 弹窗关闭时执行
 * @description: 弹窗关闭方法，重置表单
 * @return {*}
 */
function onClose() {
  formRef.value.resetFields();
  formData.value = {
    name: "",
    description: "",
    planTime: [],
    priority: "",
    teacherList: [],
    userList: [],
  };
}
/**
 * @name: 弹窗取消
 * @description: 弹窗取消方法
 * @return {*}
 */
function close() {
  dialogVisible.value = false;
}
/**
 * @name: 弹窗表单提交
 * @description: 弹窗表单提交方法
 * @return {*}
 */
function handelConfirm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    // TODO 提交表单

    // 回调父级组件
    let params = {
      name: formData.value.name,
      description: formData.value.description,
      startTime: formData.value.planTime[0],
      endTime: formData.value.planTime[1],
      id: props.currentPlanId ? props.currentPlanId : "",
      priority: formData.value.priority,
      teacherList: JSON.parse(JSON.stringify(formData.value.teacherList)),
      userList: JSON.parse(JSON.stringify(formData.value.userList)),
    };
    console.log("params");
    emit("confirm", params);
    close();
  });
}
// 添加教师弹窗打开
function addTeacherShow() {
  memberDialogVisible.value = true;
}
// 添加教师
function addTeacher(params) {
  formData.value.teacherList = params.map((item) => {
    let i = {
      id: item.id,
      username: item.username,
    };
    return i;
  });
}

// 添加学生弹窗打开
function addStudentShow() {
  memberDialogVisible2.value = true;
}
// 添加学生
function addStudent(params) {
  formData.value.userList = params.map((item) => {
    let i = {
      id: item.id,
      username: item.username,
    };
    return i;
  });
}
//当编辑器的内容更新时，获取该值
const getRich = function (value) {
  formData.value.description = value;
};
</script>
<style lang="scss">
.el-upload__tip {
  line-height: 1.2;
}
.task-dialog {
  .el-dialog {
    .el-dialog__body {
      height: 500px;
      overflow-y: auto;
      .task-form-title {
        margin: 20px 0;
        border-left: 3px solid rgb(64, 158, 255);
        padding: 0 10px;
        font-weight: bold;
      }
      .el-form {
        width: 90%;
        .el-tag {
          margin-right: 10px;
        }
        .check-list {
          padding: 10px;
          &:nth-child(even) {
            background: rgba(64, 158, 255, 0.2);
          }
        }
      }
    }
  }
}
</style>
